<template>
	<view class="calendar-content" v-if="showCalendar">
		<view style="margin-top: 25px;">
			<!-- 插入模式 -->
			<uv-calendars ref="calendars" insert class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
				@change="change" @monthSwitch="monthSwitch" />
		</view>
	</view>
	<view style="width: 100%;margin-top: 30px;">
		<text>{{$t("record.illustrate")}}：</text>
		<uni-row class="demo-uni-row">
			<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-for="(item,index) in notes">
				<view class="demo-uni-col dark">
					<uni-icons type="color-filled" :color="item.color" size="23"></uni-icons>
					<text>{{$t(item.text)}}</text>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import {
		getSiteId
	} from '@/common/tools.js'
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}

	export default {
		components: {},
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
					month: ""
				},
				city: '',
				sitename: '',
				siteId: '',
				notes: [{
					text: "monitor.Excellent",
					color: "#01E501"
				}, {
					text: "monitor.VeryMuch",
					color: "#FEE301"
				}, {
					text: "monitor.LightPollution",
					color: "#FF7E01"
				}, {
					text: "monitor.ModeratePollution",
					color: "#FF0101"
				}, {
					text: "monitor.HeavyPollution",
					color: "#980148"
				}, {
					text: "monitor.SeriousContamination",
					color: "#810127"
				}]
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			this.siteId = getSiteId();
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			this.monthSwitch({
				year: year,
				month: month
			});
		},
		onNavigationBarButtonTap(event) {
			console.log('nav', event);
			this.gotoCityPage();
		},
		methods: {
			open() {
				this.$refs.calendar.open()
				console.log(this.info.selected)

			},
			close() {
				console.log('弹窗关闭');
			},
			change(e) {
				console.log('change 返回:', e)
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			gotoCityPage() {
				uni.navigateTo({
					url: "/pages/assist/city",
					events: {
						acceptDataFromOpenedPage: (data) => {
							this.siteId = data.id;
							this.city = data.name;
							this.sitename = data.phone;
							// this.monthSwitch() 
							// console.log(getDate());
							this.monthSwitch(getDate());
						}
					}
				})
			},

			monthSwitch(e) {
				let date1 = e.year + "-" + e.month;
				this.month = e;
				this.info.selected = [];
				this.$http.get(this.$api.calendardata.url + "/" + this.siteId, {
					date: date1
				}).then(res => {
					console.log(res)
					let color;
					this.info.selected = []
					// console.log(this.info.selected)
					res.result.forEach((item, index) => {
						//console.log(index)
						if (item.aqi <= 50 && item.aqi > 0) {
							color = this.notes[0].color;
						} else if (item.aqi <= 100) {
							color = this.notes[1].color;
						} else if (item.aqi <= 150) {
							color = this.notes[2].color;
						} else if (item.aqi <= 200) {
							color = this.notes[3].color;
						} else if (item.aqi <= 300) {
							color = this.notes[4].color;
						} else {
							color = this.notes[5].color;
						}

						let data = {
							date: item.date.substr(0, 10),
							info: item.aqi.toString(),
							infoColor: color,
						}

						this.info.selected.push(data);
					});
				});

				console.log(e.year + "-" + e.month)

				// uni.request({
				// 	url: 'http://111.230.9.199/pm2.5/index.php/calendardata',
				// 	data: {
				// 		site: "cqdzx",
				// 		date: `2023-${e.month}`,
				// 	},
				// 	header: {
				// 		"Authorization": 'Bearer ' +
				// 			"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjZGNldCIsImF1ZCI6ImV2ZXJvbmUiLCJpYXQiOjE3MDAzNzI5MDYsIm5iZiI6MTcwMDM3MjkwNiwiZXhwIjoxNzA4OTI2NTA2LCJkYXRhIjp7ImlkIjoxLCJyb2xlSWQiOjJ9fQ.-z5NzWuG0cEitnAM7WnvQGx6OeGQKLzpOJlvopRJ2xI"
				// 	},
				// 	success: (res) => {
				// 		// console.log(res)
				// 		this.info.selected = [],
				// 			res.data.result.forEach((item, index) => {
				// 				//console.log(index)
				// 				let data = {
				// 					date: item.date.substr(0, 10),
				// 					info: item.aqi.toString(),
				// 					infoColor: '#00ff00'
				// 				}

				// 				this.info.selected.push(data);
				// 			});
				// 		console.log("res")
				// 		console.log(this.info.selected)
				// 		// this.info.selected = [{
				// 		// 		date: `2023-${e.month}-02`,
				// 		// 		info: '26.5', 
				// 		// 		infoColor: '#ff0000'
				// 		// 	},
				// 		// 	{
				// 		// 		date: `2023-${e.month}-03`,
				// 		// 		info: '余10000',
				// 		// 		infoColor: '#19be6b',
				// 		// 	}
				// 		// ]
				// 		// console.log("new")
				// 		// console.log(this.info.selected)
				// 	}
				// });
			}
		}
	}
	// let pos,pthis;
	// export default {
	// 	components: {},
	// 	data() {
	// 		const d = new Date()
	// 		const year = d.getFullYear()
	// 		let month = d.getMonth() + 1
	// 		let day = d.getDate()

	// 		month = month < 10 ? `0${month}` : month
	// 		const date = d.getDate()
	// 		return {
	// 			selected: [],
	// 		}
	// 	},

	// 	onShow() {
	// 		pos = uni.getStorageSync("sitename");
	// 		pthis = this;
	// 		this.monthSwitch({year:"2023",month:"11"});
	// 	},

	// 	methods: {
	// 		monthSwitch(e) {
	// 			console.log(e.year + "-" + e.month)
	// 			console.log(pos)
	// 			// console.log(this.selected)

	// 			let date1 = e.year + "-" + e.month;
	// 			pthis.selected=[];
	// 			this.$request(this.$api.calendardata, {
	// 				site: pos,
	// 				date: date1
	// 			}).then(res => {

	// 				res.result.forEach((item, index)=>{
	// 					//console.log(index)
	// 					let data = {
	// 						date: item.date.substr(0, 10),
	// 						info: item.aqi.toString(),
	// 						infoColor: '#00ff00'
	// 					}

	// 					this.selected.push(data);
	// 				});

	// 			});
	// 		}
	// 	}
	// }
</script>

<style>
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、抖音小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}
</style>


<!-- {
date: `${year}-${month}-02`,
info: '26.5',
infoColor: '#ff0000'
}, {
date: `${year}-${month}-${day}`,
info: '余10',
infoColor: '#19be6b',
topinfoColor: '#19be6b'
} -->